<template>
  <div>
    <el-form :rules="rules"
             ref="ruleForm"
             :model="ruleForm">
      <el-form-item prop="title">
        <el-input
            type="text"
            placeholder="请输入标题"
            v-model="ruleForm.title"
            maxlength="20"
            show-word-limit
            autofocus
            autosize
            validate-event
        >
        </el-input>
      </el-form-item>

      <el-form-item prop="content">
        <div style="margin: 20px 0;"></div>
        <el-input
            type="textarea"
            placeholder="请输入内容"
            v-model="ruleForm.content"
            maxlength="200"
            show-word-limit
            autosize
            validate-event
        >
        </el-input>
      </el-form-item>
      <el-form-item >
        <el-input type="text"
                  style="width: 160px "
                  placeholder="点击图片更换验证码"
                  v-model="code"></el-input>
        <img @click="clickImg" style="height: 60px;width: 180px;
margin-left: 30px;position: absolute;top: -10px" :src="codeURL"/>
      </el-form-item>

    </el-form>

    <el-button type="primary" style="float: right;margin-top: 20px" @click="submitWallMessage('ruleForm')">发布
    </el-button>
    <el-button style="float: right;margin-top: 20px;margin-right: 10px" type="info" @click=" resetForm(ruleForm)"><i
        class="el-icon-refresh-right"/></el-button>
  </div>
</template>

<script>
export default {
  name: "PublishMessage",
  data() {
    return {
      ruleForm: {
        title: '',
        content: ''
      },
      code:'',
      rules: {
        title: [
          {required: true, message: '请输入标题', trigger: 'blur'},
          {min: 3, message: '标题需要大于3个字', trigger: 'blur'}
        ],
        content: [
          {required: true, message: '请输入内容', trigger: 'blur'},
          {min: 5, message: '内容需要大于5个字', trigger: 'blur'}
        ]
      },
      globals: {
        'returnCitySN': true
      },
      user: "",
      codeURL: this.$store.state.baseUrl+'/kaptcha?user_id='+this.user.user_id
    }
  },
  methods: {
    resetForm(formName) {
      this.$confirm('确认重置？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$refs.ruleForm.resetFields();
        this.$message({
          type: 'success',
          message: "重置成功"
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消重置'
        });
      });
    },

    submitWallMessage() {
     if(this.beforeOperate()){
       this.$confirm('确认发布？', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
       }).then(() => {
         this.$refs.ruleForm.validate((valid) => {
           if (valid) {
             console.log(returnCitySN.cname);
             let address = returnCitySN.cname + "   " + returnCitySN.cip;
             console.log(address);
             console.log(this.user+"   12312312");
             this.postRequest(this.$store.state.baseUrl+"/message/addMessage", {
               message_content: this.ruleForm.content,
               message_title: this.ruleForm.title,
               message_userName: this.user.username,
               message_userId: this.user.user_id,
               message_address: address,
               verifyCodeActual:this.code

             }).then(resp =>{
               if(resp.code == 401){
                 this.$message({
                   type: 'error',
                   message: "验证码错误"
                 });
               }else {
                 this.$message({
                   type: 'success',
                   message: "发布成功"
                 });
                 this.$router.push("/")
               }
             })

           } else {
             this.$message("请输入所有字段");
             return false;
           }
         });

       }).catch(() => {
         this.$message({
           type: 'info',
           message: '已取消发布'
         });
       });
     }else {
       this.$message("请先登录");
       this.$router.push("/userLogin");
     }
    },
    clickImg(){
      this.codeURL = this.codeURL+"?user_id="+this.user.user_id;
    }


  },
  mounted() {
    this.user = JSON.parse(window.sessionStorage.getItem("user"));

  },
  beforeCreate() {
    this.user = JSON.parse(window.sessionStorage.getItem("user"));
    console.log(this.user)
  }

}
</script>

<style scoped>

</style>
